import React, { useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import Navbar from '@/comopnents/Navbar'
import styles from './index.module.less'
import { Radio, Button, Toast } from 'antd-mobile'
import { AlipayCircleFill, CheckCircleFill } from 'antd-mobile-icons'
import { payConfirm } from '@/utils/my/order'
import axios from 'axios'
import qs from 'qs'
export default function Payment() {

    const navigate = useNavigate()

    const { state } = useLocation()
    console.log(state)

    // 单选框变化的事件
    const radioChange = (val: any) => {
        val && setSelectRadio(val)
    }
    // 当前选中的单选框
    const [selectRadio, setSelectRadio] = useState('1')

    // 立即支付的点击事件
    const btnClick = () => {
        if (selectRadio === '1') {
            axios({
                url: "http://localhost:3016/pay/payment",
                method: "post",
                data: qs.stringify({ 'orderId': state.orderId, 'totalAmount': state.totalAmount,'type':selectRadio })
            }).then(res => {
                // console.log(res);
                window.location.href = res.data.result
            })
        } else {
            pay({
                payType: parseFloat(selectRadio),
                orderId: state.orderId,
                map: JSON.parse(localStorage.getItem('adress') as string)
            })
        }
    }

    const pay = async (data: any) => {
        let res: resType = await payConfirm(data)
        if (res.code === 20000) {
            console.log('跳转至成功页面')
            navigate(`/my/order/payresult?price=${state.totalAmount}`, { replace: true })
        } else {
            Toast.show({
                icon: 'fail',
                content: res.message,
                duration: 1500
            })
        }
    }
    return (
        <div>
            <Navbar title='乐居'></Navbar>
            <div className={styles.orderInfo}>
                <div className={styles.orderItem}>
                    <span>订单编号：</span>
                    <span>{state.orderSn}</span>
                </div>
                <div className={styles.orderItem}>
                    <span>订单金额：</span>
                    <span>{state.totalAmount} 元</span>
                </div>
            </div>

            <div className={styles.selectPayment}>
                <div className={styles.title}>请选择支付方式</div>
                <Radio.Group defaultValue='1' onChange={(value) => radioChange(value)}>
                    <div className={styles.paymentItem}>
                        <div>
                            <AlipayCircleFill fontSize={30} color='#5a9ef7' />
                            <div className={styles.mode}>支付宝支付</div>
                        </div>
                        <Radio value='1'></Radio>
                    </div>
                    <div className={styles.paymentItem}>
                        <div>
                            <CheckCircleFill fontSize={30} color='#3bca72' />
                            <div className={styles.mode}>微信支付</div>
                        </div>
                        <Radio value='2'></Radio>
                    </div>
                </Radio.Group>
            </div>

            <div className={styles.btn}>
                <Button block color='primary' shape='rounded' size='large' onClick={btnClick}>
                    立即支付
                </Button>
                <div className={styles.agreement}>
                    点击立即支付，即代表您同意
                    <Link className={styles.link} to="/my/order/agreement">《条款协议》</Link>
                </div>
            </div>
        </div>
    )
}
